<template>
  <div class="login">
      <div class="account" v-if="!isPhoneLogin">
        <top-header :isLeft="true" title="登录星享俱乐部"></top-header>
        <div class="login-content">
           <login-input v-for="(item, index) in accountData" :key="index" :info="item"></login-input>
        </div>
        <div class="login-opreate">
          <a-button type="primary" block shape="round" @click="login" >
              登录
          </a-button>
          <a-button type="link" @click="isPhoneLogin=!isPhoneLogin">
              使用手机号注册/登录
          </a-button>
      </div>
    </div>

      <div class="phone" v-if="isPhoneLogin">
      <top-header :isLeft="true" title="欢迎来到星享俱乐部"></top-header>
      <div class="login-content">
          <login-input v-for="(item, index) in phoneData" :key="index" :info="item"></login-input>
      </div>
      <div class="login-opreate">
           <a-button type="primary" block shape="round" @click="login">
              登录/注册
          </a-button>
          <a-button type="link" @click="isPhoneLogin=!isPhoneLogin">
              使用账号密码登录
          </a-button>
      </div>
      </div>
  </div>
</template>

<script>
import LoginInput from '../components/LoginInput.vue'
import TopHeader from '../components/TopHeader.vue'
export default {
  components:{TopHeader,LoginInput},
  data() {
      return {
          VCode:'',
          isPhoneLogin:false,
          accountData:{
              email:{
                  label:"用户名/邮箱",
                  val:"",
              },
              password:{
                  label:"密码",
                  val:"",
                  type:"password"
              }
          },
          phoneData:{
              phoneNum:{
                  label:"手机号码",
                  val:""
              },
              verificationCode:{
                  label:"验证码",
                  val:'',
                  right:"点击获取验证码",
                  toogle:this.getVerificationCode
              }
          }
      }
  },
  methods: {
      getVerificationCode(){
        const self=this;
        this.$http.get('/api/getVerificationCode').then(
            res=>{
              self.VCode=res.data.data.num;
              self.$success({
                  title:"验证码",
                  content:(
                      <div>
                       <p>{self.VCode}</p>
                      </div>
                  ),
              });
            },
            err=>{

            })
      },
      login(){
          const self=this;
          let promise=null;
          if(this.isPhoneLogin){
           //手机号登录
           if(self.VCode==self.phoneData.verificationCode.val){
                promise= this.$http.post('/login',{
                phone:self.phoneData.phoneNum.val
              })
           }else{
                self.$message.error('验证码错误');
                return;
           }
          }else{
           //账号登录
            promise=this.$http.post('/login',{
               email:self.accountData.email.val,
               password:self.accountData.password.val
           })
          }
          promise.then(
            (res)=>{
                self.$store.dispatch('setUserInfo',res.data.data.userInfo);
                self.$router.push('/me');
            },
            (err)=>{
                self.$message.error(err);
            }
        );
      }
  },
}

</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: $app-bg-color;
  .account,
  .phone {
    height: 100%;
    .login-content {
      padding: $common-padding;
    }
    .login-opreate {
      height: 20%;
      padding: $common-padding;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
  }
}
h2 {
  font-size: 2rem;
  font-weight: bolder;
}
.icon-guanbi {
  font-size: 20px;
  font-weight: bolder;
}
</style>